前端性能优化

1 基本过程

先了解打开一个Web页面的过程：

用户输入网址，浏览器接收到用户输入的地址（一般为域名）
浏览器解析输入，获取域名并通过DNS查询，获取该域名的IP
查询顺序是浏览器缓存，主机缓存，路由器缓存，ISP（互联网服务提供商）DNS缓存，根域名服务器，顶级域名服务器
浏览器发送HTTP请求到目标主机，获取相应的资源（还有可能被重定向）
请求Header中会包含浏览器支持的编码方式，接受的内容，有cookie的话还会发送cookie
——-请求发送—–
服务器处理浏览器请求，返回相应的资源内容
——-响应接收—–
浏览器接收到资源内容，根据响应Header信息解析资源内容
解析过程可能是解码字节流，解压gzip，解码资源文件，如果编码不明确，还要做编码嗅探
根据解码的文件内容，请求其他相关的资源，比如说JavaScript，CSS，图片等，由回到输入网址的过程
浏览器将拿到的资源进行解析，渲染并显示在浏览器窗口中

减少HTTP请求次数（网络绝大部分的时间80%花在了传输上）
每一趟都跑的很累，少跑一趟能省不少事，这个是大头；同样多的活，跑的趟数少了，每趟干背的东西得多
- 合并资源（图片，CSS，JS分别合并）
- 合并图片到CSS文件：使用编码的方式将图片编码到CSS中
- 尽量使用AJAX GET代替POST
减少传输数据量
跑的趟数是少了，但每趟干的活多了，也不是一个很好的事情，要是每趟背的东西也能少，就更好了。
- 将合并的静态资源文件进行压缩，服务端启用gzip等压缩
- 减小cookie内容
  像个未断奶的孩子一样，来回都得背着，背个小孩子总比背个大孩子要轻松
- 将静态内容和动态内容分开，将需要cookie的内容和不需要cookie的内容分开
- 避免重复脚本内容，导致的多次下载
启用缓存
客户端可以共享的资源就没有必要再次请求了（同时也减少了次数），即使需要请求，也是询问资源是否变化，少背东西总能快些
避免无效请求
大老远跑一趟不容易，白跑总不合适，家里老婆等着拿东西下锅呢
- 杜绝404（图片，CSS，JS等）
- 避免页面跳转或重定向
避免跑远路
- 使用CDN